<template>
    <!-- <el-timeline v-if="data.length > 0"> -->
    <!-- <el-timeline-item
      v-for="(item, index) in data"
      :key="index"
      :timestamp="formatTimestamp(item.timestamp)"
      placement="top"
      class="custom-timeline-item">
      <el-card>
        <h4>{{ item.title }}</h4>
        <p>{{ item.content }}</p>
      </el-card>
    </el-timeline-item>
  </el-timeline> -->
    <div class="timel">
        <div class="ti_li" v-for="(item, index) in data" :key="index" >
            <div class="sj" >
                {{item.yearMonth||''}}
                <div class="timestamp">
                </div>
            </div>
             <template v-for="(exhibition, idx) in (expandedYears[item.year] ? item.exhibitions : item.exhibitions.slice(0, 3))" :key="idx">
        <div class="info-item">
          <div class="in_top">{{ exhibition.exhibitionName || '采购需求' }}</div>
          <div class="in_bot">
            <div v-for="(demand, demandIdx) in exhibition.demands" :key="demandIdx">{{ demand }}</div>
          </div>
        </div>
      </template>
             <!-- 新增：展开/折叠按钮 -->
      <div v-if="item.exhibitions.length > 3" class="expand-btn" @click="toggleExpand(item.year)">
        {{ expandedYears[item.year] ? '收起' : '查看更多<<' }}
      </div>
        </div>

    </div>

    <!-- 无数据状态 -->
    <!-- <div v-else class="no-data" style="padding: 40px 0; text-align: center; color: #909399;">
    <el-icon style="font-size: 24px; margin-bottom: 10px;"><empty /></el-icon>
    <div>暂无采购意向数据</div>
  </div> -->
</template>

<script lang="ts" setup>
import { formatTimestamp } from '@/utils/date-utils'; // 假设公共日期工具
import { Empty } from '@element-plus/icons-vue';
import { ref, reactive } from 'vue'; // 添加reactive导入
// 定义组件接收的数据格式
interface PurchaseItem {
    id: number;
    timestamp: number | string;
    title: string;
    content: string;
}

// 接收父组件传入的数据
const props = defineProps<{
    data: PurchaseItem[];
}>();
// 新增：展开状态管理
const expandedYears = reactive<Record<string, boolean>>({});

// 新增：切换展开/折叠状态
const toggleExpand = (year: string) => {
  expandedYears[year] = !expandedYears[year];
};
</script>

<style scoped lang="less">

.timel {
    border-left: 2px solid rgba(224, 224, 224, 1);
    margin: 0 55px;
    padding-left: 65px;
    font-family: 'Microsoft YaHei', sans-serif;
    .expand-btn{
        text-align: center;
        font-size: 16px;
        color: rgba(22, 119, 255, 1);
        cursor:pointer;
        margin-bottom: 15px;

    }
    .ti_li {
        position: relative;

        .sj {
            position: absolute;
            left: -110px;
            text-align: center;
            background: #fff;
            font-size: 16px;
            .timestamp {
                width: 7px;
                height: 7px;
                margin: 0 auto;
                border-radius: 50%;
                background: rgba(22, 119, 255, 1);
            }
        }
        .info-item {
            // width: 1410px;
            width: 100%;
            display: inline-block;
            border-radius: 5px;
            overflow: hidden;
            margin-bottom: 22px;
            border: 1px solid rgba(201, 201, 201, 1);
            &:last-child{
                margin-bottom: 15px;

            }

            .in_top{
                font-size: 16px;
                padding: 0 30px;
                line-height: 40px;
                background: rgba(239, 244, 255, 1);
            }
            .in_bot{
                padding: 14px 30px;
                font-size: 14px;
            }
        }
    }

}
</style>